<template>
  <div class="container">
    <div class="index-title">{{ routeQuery.name }}</div>
    <el-row class="" style="margin-bottom: 20px">
      <el-col :span="16" align="left">
        <el-select
          v-model="searchFrom.status"
          style="width: 150px; margin-right: 15px"
          @change="search"
          placeholder="状态"
          size="small"
          clearable
          v-if="pageModel == 'other' || pageModel == 'look'"
        >
          <el-option
            v-for="item in state.dict_status_list"
            :key="item.itemValue"
            :label="item.itemText"
            :value="item.itemValue"
          >
          </el-option>
        </el-select>
        <el-button
          class="ordinary"
          @click="search()"
          v-if="pageModel == 'other' || pageModel == 'look'"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="ordinary" @click="getExportBtn()">批量导出</el-button>
        <el-button
          type="success"
          @click="handleOpenOrClose(1)"
          v-if="pageModel == 'other'"
          >开启</el-button
        >
        <el-button type="danger" @click="handleOpenOrClose(0)" v-if="pageModel == 'other'"
          >关闭</el-button
        >
      </el-col>
    </el-row>
    <div>
      <el-table
        :data="state.table_list"
        style="width: 100%"
        border
        row-key="id"
        ref="qwltTable"
        @selection-change="selectionChange"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :selectable="checkSelect"
          :reserve-selection="false"
        />
        <el-table-column prop="number"  label="指标编号" width="200px"  align="left" />
        <el-table-column prop="name" align="center" label="指标名称" />
        <el-table-column prop="scoreType_text" align="center" label="计分类型" width="80">
        </el-table-column>
        <el-table-column
          prop="scoreMethod_text"
          align="center"
          label="评分方式"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="planScore"
          align="center"
          label="计划得分(H)"
          width="120"
        />
        <el-table-column prop="planTask" align="center" label="计划任务" width="200">
        </el-table-column>
        <el-table-column prop="createUsername" align="center" label="创建人" width="80" />
        <el-table-column prop="createTime" align="center" label="创建时间" width="200" />
        <el-table-column
          prop="taskPeopleUsername"
          align="center"
          label="任务录入人"
          width="80"
        />
        <el-table-column
          prop="taskDatetime"
          align="center"
          label="任务录入时间"
          width="200"
        />
        <el-table-column prop="status_text" align="center" label="状态" width="80">
          <template #default="scope">
            <span :class="[scope.row.status == 1 ? 'btnClass1' : 'btnClass2']">{{
              scope.row.status_text
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="操作"
          width="180"
          fixed="right"
          v-if="pageModel == 'other'"
        >
          <template #default="scope">
            <span v-if="scope.row.listType != 'sum'">
              <el-button
                class="ordinary"
                @click="handleEdit(scope.row)"
                v-if="
                  state.planDetail &&
                  (state.planDetail.status == '1' || state.planDetail.status == '4') &&
                  scope.row.status == '1' &&
                  scope.row.indexType == '3'
                "
                >编辑</el-button
              >
              <el-button
                type="primary"
                v-if="
                  state.planDetail &&
                  (state.planDetail.status == '1' || state.planDetail.status == '4') &&
                  scope.row.status == '1' &&
                  scope.row.indexType == '3' &&
                  scope.row.scoreMethod == '1'
                "
                @click="simulateAllot(scope.row)"
                >模拟分解</el-button
              >
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="state.editVisible" title="编辑" width="500px">
      <div class="examine-dialog-content">
        <el-form :model="myForm" :rules="fomrRules" ref="ruleFormRef" label-width="85px">
          <el-form-item label="指标名称:" prop="examineFactor">
            {{ myForm.name }}
          </el-form-item>
          <el-form-item label="计划任务:" prop="planTask">
            <el-input
              v-model="myForm.planTask"
              :rows="2"
              type="textarea"
              placeholder="请书写计划任务"
            />
          </el-form-item>
          <el-form-item label="计划得分:" prop="planScore">
            <el-input-number
              :disabled="state.handleRowData.scoreMethod === '1'"
              v-model="myForm.planScore"
              :controls="false"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.editVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmEdit"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
    <simulateAllotModal
      v-model:visible="state.simulateFjVisible"
      :handleRow="state.handleRowData"
    >
    </simulateAllotModal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive,nextTick } from "vue";
// import Table from '../../../components/indexTable.vue'
import * as api from "../../../api/zJexaminePlan";
import { ElMessageBox, ElMessage } from "element-plus";
import { useRoute } from "vue-router";
// import { dataDictionary } from '@/api/dict'
import pubFc from "@/views/examineManage/utils";
import simulateAllotModal from "./simulateAllotModal.vue";
interface Cdata {
  [propName: string]: any;
}
const searchFrom = reactive({
  //查询
  status: "",
});
// const refreshPage:any=inject('refreshPage', Function, true);
const pageModel = ref(""); //页面模式other self look不能编辑
const route = useRoute();

const routeQuery = route.query;
const ruleFormRef = ref();
const fomrRules = reactive<any>({
  planScore: [{ required: true, message: "请填写得分", trigger: "blur" }],
});
// let annualId=route.query.id;
pageModel.value = route.path=='/examineManage/techExamine/zzExamine/ePlanDetail'?'other':'self'
searchFrom.status = pageModel.value == "other" ? "" : "1";
let state = reactive<Cdata>({
  table_list: [],
  modalVisible: false,
  opType: "add", //add,edit,copy
  handleRowData: null, //正在处理的行数据
  table_loading: false,
  dict_status_list: [
    {
      itemValue: "1",
      itemText: "开启",
    },
    {
      itemValue: "2",
      itemText: "关闭",
    },
  ],
  planDetail: null,
  editVisible: false,
  simulateFjVisible: false,
  zzEditType: "", //一种状态
});
const myForm = reactive({
  name: "",
  planScore: undefined, //计划得分
  planTask: "", //计划任务
});
let selectedRows = ref<any>([]);
const search = () => {
  //搜索
  gettargetlist();
};
const confirmEdit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      api
        .updatePlanDetailRequest({
          ...myForm,
          id: state.handleRowData.id,
        })
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage.success("编辑成功");
            state.editVisible = false;
            search();
          }
        });
    }
  });
};
const checkSelect = (row, index) => {
  let isChecked = true;
  if (index === 0) {
    // 判断里面是否存在某个参数
    isChecked = false;
  } else {
    isChecked = true;
  }
  return isChecked;
};

const getExportBtn = () => {
  ElMessageBox.confirm("确定要批量导出吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
  //批量导出
  api
    .exportPlanDetailRequest({
      ...searchFrom,
      id: routeQuery.id,
    })
    .then((res) => {
      const { data, headers } = res;
      pubFc.downloadFunc(data, headers);
    });
  });
};
const selectionChange = (arr) => {
  //选中
  selectedRows.value = arr;
};
const handleOpenOrClose = (type: number) => {
  //开启或关闭
  if (!selectedRows.value.length) {
    ElMessage.warning("请选择数据");
    return;
  }
  let apiName = type == 1 ? "openPlanRequest" : "closePlanRequest";
  let ids = selectedRows.value.map((item) => {
    return item.id;
  });
  api[apiName]({
    itemId: routeQuery.id,
    idList: ids,
  }).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(type == 1 ? "已开启" : "已关闭");
      gettargetlist();
    }
  });
};
const simulateAllot = (item) => {
  //模拟分配
  state.handleRowData = item;
  state.simulateFjVisible = true;
};
const handleEdit = (item) => {
  //编辑
  myForm.name = item.name;
  myForm.planScore = item.planScore || undefined;
  myForm.planTask = item.planTask || "";
  state.handleRowData = item;
  state.editVisible = true;
};
const getPlandetail = () => {
  api
    .planDetailRequest({
      id: routeQuery.id, //1-中交标准指标、2-中咨标准指标
    })
    .then((res) => {
      state.planDetail = res.data.data;
      // if(pageModel.value=='edit'&&res.data.data.status !== '1' && res.data.data.status !== '4'){
      //   state.zzEditType='1';
      // }
      if (
        res.data.data.status !== "1" &&
        res.data.data.status !== "4" &&
        pageModel.value == "other"
      ) {
        pageModel.value = "look";
      }
    });
};
const qwltTable=ref<any>();
const gettargetlist = () => {
  //获取table列表

  state.table_loading = true;
  api
    .planIndexDetailRequest({
      ...searchFrom,
      id: routeQuery.id, //1-中交标准指标、2-中咨标准指标
    })
    .then((res) => {
      state.table_loading = false;
      let list = res.data.data.produceItemIndexList;
      list.unshift({
        name: "合计",
        planScore: res.data.data.sumScore,
        listType: "sum",
      });
      state.table_list = res.data.data.produceItemIndexList;
      nextTick(()=>{
        if(qwltTable.value){  //使用了父子级后选中第一级再查询后这一级就无法清除了
          (qwltTable as any).value.clearSelection();
        }
      })
    });
};
getPlandetail();
// getDictDatas()
gettargetlist();
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
  overflow-y: auto;
  .index-title {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7e5e5;
    margin-bottom: 10px;
    font-size: 26px;
  }
}

.btnClass1 {
  color: #67c23a;
}
.btnClass2 {
  color: #f56c6c;
}
:deep(.el-dialog__body) {
  padding: 0;
}
:deep(.el-dialog__header) {
  border-bottom: 1px solid #f1eded;
}
</style>
